<template>
  <div>
    <div>
      <Button type="success" style="margin-bottom:10px" @click="modal = true">Add</Button>
      <Button type="warning" style="margin-bottom:10px" @click="removeAllData()">RemoveAll</Button>
      <Input placeholder="Enter Name" style="width: 150px;margin-bottom:10px" v-model="searchName"/>
      <Input
        placeholder="Enter Password"
        style="width: 150px;margin-bottom:10px"
        v-model="searchPassword"
      />
      <Button type="success" style="margin-bottom:10px" @click="search()">Search</Button>
    </div>

    <Table
      border
      ref="selection"
      :columns="columns12"
      :data="data6"
      style="margin-bottom:10px"
      @on-select="selectRemove"
    >
      <template slot-scope="{ row }" slot="name">
        <strong>{{ row.name }}</strong>
      </template>
      <template slot-scope="{ row }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="update(row)">Update</Button>
        <Button type="error" size="small" @click="remove(row._id)">Delete</Button>
      </template>
    </Table>
    <Page
      :total="total"
      show-sizer
      @on-change="changePage"
      :page-size-opts="[6,10,20,30,50]"
      :page-size="rows"
      @on-page-size-change="changePageSize"
    />

    <Modal
      v-model="modal"
      title="Message"
      @on-ok="ok('formValidate')"
      @on-cancel="cancel('formValidate')"
    >
      <template>
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
          <FormItem label="Name" prop="name">
            <Input v-model="formValidate.name" placeholder="Enter your name"/>
          </FormItem>
          <FormItem label="Password" prop="password">
            <Input v-model="formValidate.password" placeholder="Enter your password"/>
          </FormItem>
        </Form>
      </template>
    </Modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns12: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "Name",
          slot: "name"
        },
        {
          title: "Password",
          key: "password"
        },
        {
          title: "Action",
          slot: "action",
          width: 200,
          align: "center"
        }
      ],
      data6: [],
      total: 0,
      page: 1,
      rows: 6,
      filterText: "",
      ids: "",
      strIds: "",
      searchName: "",
      searchPassword: "",
      searchText: {},

      modal: false,

      formValidate: {
        name: "",
        password: ""
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: "The name cannot be empty",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "The name cannot be empty",
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {
    filters() {}
  },
  methods: {
    show(index) {
      this.$Modal.info({
        title: "User Info",
        content: `Name：${this.data6[index].name}<br>Age：${
          this.data6[index].age
        }<br>Address：${this.data6[index].address}`
      });
    },
    remove(id) {
      //console.log(row);
      this.$Modal.confirm({
        title: "Title",
        content: "<p>你确认要删除此条记录吗?</p>",
        onOk: () => {
          this.axios({
            url: `http://localhost:3000/users/${id}`,
            method: "delete"
          }).then(res => {
            //console.log(res);
            this.getList();
          });
        },
        onCancel: () => {
          this.$Message.info("Clicked cancel");
        }
      });
    },
    getList() {
      this.axios({
        url: "http://localhost:3000/users/list",
        method: "post",
        data: {
          page: this.page,
          rows: this.rows
        }
      }).then(res => {
        this.data6 = res.data.rows;
        this.total = res.data.total;
        //console.log(res.data);
      });
    },
    changePage(page) {
      //console.log(page);
      this.page = page;
      this.getList();
    },
    changePageSize(pageSize) {
      //console.log(pageSize);
      this.rows = pageSize;
      this.getList();
    },
    update(row) {
      //console.log(row);
      this.modal = true;
      this.formValidate.name = row.name;
      this.formValidate.password = row.password;
      this.ids = row._id;
    },
    search() {
      console.log(this.searchName, this.searchPassword);
      //console.log(this.searchText);
      /*  this.axios({
        url: `http://localhost:3000/fenlist/:mesgStr`,
        method: "post"
      }).then(res => {
        //console.log(res);
        this.getList();
      }); */
    },
    selectRemove(selection, row) {
      this.strIds = "";
      console.log(selection);
      for (var value of selection) {
        //console.log(value._id);
        this.strIds += value._id + ",";
      }
      this.strIds = this.strIds.substring(0, this.strIds.length - 1);
      console.log(this.strIds);
      //console.log(row);
    },
    removeAllData() {
      //console.log(this.strIds);
      this.axios({
        url: `http://localhost:3000/users/removes`,
        method: "post",
        data: {
          ids: this.strIds
        }
      }).then(res => {
        //console.log(res);
        this.getList();
      });
      //this.getList();
    },

    //添加按钮弹出框
    ok(name) {
      /* console.log(this.formValidate.name);
	  console.log(this.formValidate.password); */
      if (this.ids && this.ids.length > 0) {
        this.$refs[name].validate(valid => {
          if (valid) {
            //this.$Message.success("Success!");
            this.axios({
              url: `http://localhost:3000/users/${this.ids}`,
              method: "put",
              data: {
                name: this.formValidate.name,
                password: this.formValidate.password
              }
            }).then(res => {
              //console.log(res);
              this.ids = "";
              this.getList();
              this.$refs[name].resetFields();
            });
          } else {
            this.$Message.error("Fail!");
          }
        });
      } else {
        this.$refs[name].validate(valid => {
          if (valid) {
            //this.$Message.success("Success!");
            this.axios({
              url: "http://localhost:3000/users",
              method: "post",
              data: {
                name: this.formValidate.name,
                password: this.formValidate.password
              }
            }).then(res => {
              //console.log(res);
              this.getList();
              this.$refs[name].resetFields();
            });
          } else {
            this.$Message.error("Fail!");
          }
        });
      }
    },

    cancel(name) {
      this.$refs[name].resetFields();
      //this.$Message.info("Clicked cancel");
    }
  },
  mounted() {
    this.getList();
  }
};
</script>
